<div class="round-corner white">
	<div style="margin:30px" />
	
	<div id= "send_form" >
 			 <table>
			 <tr>
			 <td width="50%">
				<div id='map' style='width:600px;height:600px'></div>
			</td>
			<td width="50%">
				<h3> Tracking On @{$username}</h3>
				<ul>
				{foreach from=$geo_info item=row key=k} 
				<li>
				<p>
				{$k|date_format:"%D %H:%M:%S"}:
				
				<a href='#' onClick='movemap({$row.l_longtitude},{$row.l_latitude});'>{$row.l_name}</a>
				{if $row.type eq "checkin"} Check in{/if}
				{if $row.type eq "photo"} Take a photo{/if}
				{if $row.type eq "message"} Post a message{/if}
				</p>
				</li>
				{/foreach}
				</ul>
			</td>
			</tr>
			</table>
				
			</div>
			 <div class="form-actions">
					<input type="button" class="btn" onclick="javascrpt:close_reg_form()" value="Close"></input>
					</div>
		 
 	</div>
</div>

<script>
	//<![CDATA[
		var map;
		onLoad();
		function onLoad() 
		{

			if (GBrowserIsCompatible()) 
			{
					 

					map = new GMap(document.getElementById("map"));
					map.centerAndZoom(new GPoint({$start_long},{$start_lat}), 0);
					var route = [];
					{foreach from=$geo_info item=row key=val} 
			 
					addmarker({$row.l_longtitude},{$row.l_latitude});
					 
					
					route.push(new GPoint({$row.l_longtitude},{$row.l_latitude} ));
					 
					{/foreach}
					map.addOverlay(new GPolyline(route));

			}
		}

		function movemap(x,y) 
		{
			map.recenterOrPanToLatLng(new GPoint(parseFloat(x),parseFloat(y)));
		}
		function addmarker(x,y) 
		{
			var point = new GPoint(parseFloat(x),parseFloat(y));
			map.addOverlay(new GMarker(point));
		}
	//]]>
		
</script>